# -*- coding: utf-8 -*-

# 经纬度数据
coords = [
    {"longitude": "118.263947", "latitude": "39.46266"},
    {"longitude": "118.265981", "latitude": "39.461425"},
    {"longitude": "118.265981", "latitude": "39.461425"},
    {"longitude": "118.265981", "latitude": "39.461425"},
    {"longitude": "118.265915", "latitude": "39.461245"},
    {"longitude": "118.265813", "latitude": "39.461307"},
    {"longitude": "118.265813", "latitude": "39.461307"},
    {"longitude": "118.265915", "latitude": "39.461245"}
]

# 高德地图API Key
amap_api_key = '0ae35d1788e8c33039dd3015c317ceda'

# 生成HTML文件内容
html_content = f"""
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>高德地图打点</title>
    <script src="https://webapi.amap.com/maps?v=2.0&key={amap_api_key}"></script>
    <style>
        #container {{
            width: 100%;
            height: 500px;
        }}
    </style>
</head>
<body>
    <div id="container"></div>
    <script>
        var map = new AMap.Map('container', {{
            zoom: 15,
            center: [118.265, 39.462] // 设置地图中心点
        }});

        var coords = {coords_js};

        coords.forEach(function(coord) {{
            var marker = new AMap.Marker({{
                position: [coord.longitude, coord.latitude]
            }});
            map.add(marker);
        }});
    </script>
</body>
</html>
"""

# 将经纬度数据转换为JavaScript数组格式
coords_js = str(coords).replace("'", '"')

# 替换HTML模板中的占位符
html_content = html_content.replace('{coords_js}', coords_js)

# 写入HTML文件
with open('map_with_markers.html', 'w', encoding='utf-8') as f:
    f.write(html_content)

print("HTML文件已生成：map_with_markers.html")
